<template>
  <div class="detail_page">
    <!-- 导航 开始 -->
    <nav-bar title="问答详情"></nav-bar>
    <!-- 导航 end -->

    <!-- 顶部标题 开始 -->
    <div class="top_info">
      <h1 class="h1">{{ oInfo.question }}</h1>
      <div class="key_words">
        <span>#{{ oInfo.topic }}</span>
        <!-- <span>#价格</span>
        <span>#矫正医生</span> -->
      </div>
      <div class="time_box">
        <div class="left">
          <span>{{ oInfo.questionPerson }}</span>
          <span>更新于 {{ oInfo.questionTime }}</span>
        </div>
        <span>{{ oInfo.initReadCnt }}浏览</span>
      </div>
    </div>
    <!-- 顶部标题 end -->

    <!-- 回答头部 开始 -->
    <div class="ask_head">
      <span class="name">共{{ total }}个回答</span>
      <!-- <div class="right">
        <span>默认排序</span>
        <van-icon name="arrow-down" class="van_icon" />
      </div> -->
    </div>
    <!-- 回答头部 end -->

    <!-- 回答列表 开始 -->
    <div class="ask_list">

      <!-- 单条回答 开始 -->
      <template v-for="(item, index) in 3">
        <div class="ask_box" :key="`answer_${index}`" v-if="oInfo['answerContent' + (index + 1)]">
          <div class="user_info">
            <div class="avatar">
              <img src="@/assets/images/avatar_user.png" class="img" alt="">
            </div>
            <div class="info">
              <span class="name">{{ oInfo['answerPerson' + (index + 1)] }}</span>
              <span class="time">更新于 {{ oInfo['answerTime' + (index + 1)] }}</span>
            </div>
          </div>
          <div class="ask_content" v-html="oInfo['answerContent' + (index + 1)]">
          </div>
        </div>
      </template>
      <!-- 单条回答 end -->
    </div>
    <!-- 回答列表 end -->

    <!-- 相关问题 开始 -->
    <div class="issues">
      <div class="head">相关问题</div>
      <div class="list_box">
        <div class="news" v-for="(item, index) in (oInfo.relQuestions || [])" :key="index" @click="lookDetail(item)">
          <h2 class="h2">{{ item.question }}</h2>
          <div class="time">
            <div class="left">
              <span>{{ item.questionPerson }}</span>
              <span class="circle"></span>
              <span>{{ DIAPLAYTIME(item.questionTime) }}</span>
            </div>
            <div class="right">
              <van-icon name="ellipsis" class="van_icon" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 相关问题 end -->

    <div class="footer_img" @click="openDialog">
      <img src="@/assets/images/question/icon.png" alt="">
    </div>

    <!-- 弹框 开始 -->
    <div class="li_popup" v-show="showPopup">
      <div class="blk"></div>
      <div class="li_popup_content">
        <div class="image_box">
          <img src="@/assets/images/question/book.png" alt="">
        </div>
        <div class="content">
          <p>您非邀请名单内用户</p>
          <p class="sub">为保障答题质量，目前仅针对邀请用户开放！</p>
          <button class="btn" @click="closeDialog">我知道了</button>
        </div>
      </div>
    </div>
    <!-- 弹框 end -->

  </div>
</template>
<script>
import { GET_QUESTIONANSWER_INFO } from "@/http/interface";
import { DIAPLAYTIME } from '@/utils/utils'
export default {
  data() {
    return {
      questionId:'',
      list: [],
      oInfo: {},
      title: "",
      description: "",
      keywords: "",
      showPopup: false,
      DIAPLAYTIME: str => DIAPLAYTIME(str),
      total: 0
    };
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.keywords,
        },
      ],
      link:[
        {ref:'canonical',href:`${this.$domain}/questions/${this.questionId}`}
      ]
    };
  },
  watchQuery: true,
  async asyncData({ query, $axios,params }) {
    let res = await $axios.get(GET_QUESTIONANSWER_INFO, {
      params: { id: params.id },
    });
    let oInfo = res.data || {};
    let total = 0;
    if (oInfo.answerContent1) {
      total += 1
    }
    if (oInfo.answerContent2) {
      total += 1
    }
    if (oInfo.answerContent3) {
      total += 1
    }
    console.log(oInfo);
    return {
      oInfo,
      title: oInfo.seoTitle,
      keywords: oInfo.seoKeywords,
      description: oInfo.seoDescription,
      total,
      questionId:params.id
    };
  },
  methods: {

    // 打开弹框
    openDialog() {
      this.showPopup = true
    },

    // 关闭弹框
    closeDialog() {
      this.showPopup = false
    },

    // 跳转到相关问题
    lookDetail(row) {
      this.$router.replace({
        path: `/questions/${row.id}`,
      });
    }

  }
};
</script>
<style lang="less" scoped>
@import "/assets/styles/questions/detail.less";
</style>